<template>
  <div>
    <Echart
      :options="options"
      id="leftmiddle2chart"
      height="3rem"
      width="6.166667rem"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
    // title:{
    //   show: true,
    //   text: '表名',
    //   textStyle: {
    //     color: '#fff'
    //   }
    //  },
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '6%',
        bottom: '3%',
        containLabel: true,
    },

    xAxis: [
        {
            name:'时间',
            nameTextStyle: {
              padding: [18, 0, 0, -17]
              },
            type: 'category',
            data: newData.xData,
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
               show: true,
               lineStyle: {
                 color: '#fff'
                },
                symbol: ['none', 'arrow'],
                symbolSize: [6, 6]
            },
            axisLabel: {
               show: true,
               interval:0,
               rotate:"45",
               textStyle: {
                  color: '#c3dbff',  //更改坐标轴文字颜色
                  fontSize : 10      //更改坐标轴文字大小
            }
     },
        }
    ],
    yAxis: [
        {
            name:'产量',
            type: 'value',
            axisLine: {
             show: true,
             lineStyle: {
               color: '#fff'
              },
            },
            axisLabel: {
             textStyle: {
               fontSize: 10
              }
            },
            splitLine:{
              show:false     //去掉网格线
            }
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'line',
            smooth: true,
            label: {
               show: true,
               color:'#fff',
               position: [2,-11], 
               formatter: function(arg){
               return arg.value
              }
            },
            barWidth: '50%',
            data: newData.yData
        }
    ]
};
      },
      immediate: true,
      deep: true
    }
  }
};
</script>